<template>
  <!-- 高峰时刻 -->
  <div class="highlighTime">
    <div class="title">
      <img src="../assets/img/高峰时刻title.png" alt="" />
    </div>
    <div class="titleList">
      <p class="font12 color97 line1">时间</p>
      <p class="font12 color97 line2">订单数</p>
      <p class="font12 color97">成交额</p>
    </div>
    <ul>
      <li class="font12" v-for="(v, i) in this.dataList" :key="i">
        <p class="time">{{ v.time }}</p>
        <p class="user">{{ $parent.toThousands(v.userCount) }}</p>
        <p class="money">￥{{ $parent.toThousands(v.gmv) }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import url from "../api/apiUrl";
import { getRequest } from "../api/indexGet";
export default {
  props: {
    type: {
      default: 0,
    },
  },
  data() {
    return {
      dataList: [],
      totalAxios: null,
    };
  },
  created() {
    this.getPeakTime();
    this.intervalAxios();
  },
  methods: {
    // 对内外（高峰时刻累计成交 板块3）
    async getPeakTime() {
      if (this.type == 1) {
        let res = await getRequest(url.peakTimeOut);
        if (res.data.code == "000000") {
          this.dataList = res.data.content;
        }
      } else {
        let res = await getRequest(url.peakTime);
        if (res.data.code == "000000") {
          this.dataList = res.data.content;
        }
      }
    },
    // 循环1s请求
    intervalAxios() {
      this.totalAxios = setInterval(() => {
        this.getPeakTime();
      }, 4000);
    },
  },
  destroyed() {
    clearInterval(this.totalAxios);
  },
};
</script>

<style lang="less" scoped>
.highlighTime {
  width: 420px;
  margin-top: -100px;
  .title {
    text-align: left;
    img {
      width: 363px;
      height: 39px;
    }
  }
  .titleList {
    display: flex;
    margin: 12px 0;
    .line1 {
      margin: 0 82px 0 18px;
    }
    .line2 {
      margin-right: 191px;
    }
  }
  ul {
    height: 176px;
    li {
      padding: 0 19px 0 15px;
      width: 420px;
      height: 32px;
      background: url("../assets/img/高峰时刻bg.png") no-repeat center;
      display: flex;
      align-items: center;
      margin-bottom: 4px;
      .time {
        width: 102px;
        margin-right: 9px;
        color: #dedee0;
      }
      .user {
        width: 100px;
        margin-right: 74px;
        color: #dedee0;
      }
      .money {
        width: 100px;
        text-align: right;
        color: #91e3f7;
        font-weight: bold;
      }
    }
  }
}
</style>